<template>
  <div class="mange-device" :class="{ 'tip-active': isShowTip }">
    <div class="tip">
      <div class="lf">
        本次共扫描到
        <span>
          {{ findResultData.length }}
        </span>
        台设备
      </div>
      <div class="rt" @click="tipToggle">
        <svg-icon iconClass="close" />
      </div>
    </div>
    <div class="tabs-slide">
      <div class="tabs">
        <div class="menus" :class="{ 'menus-active': slide }">
          <a href="javascript:;" @click="onClickSlideLeft">
            <svg-icon iconClass="menu" />
          </a>
        </div>
        <div class="tab-tab-warp">
          <div
            v-for="(items, index) in tabs"
            :key="index"
            class="tab-tab"
            :class="{ 'tab-tab-active': tabIndex === index }"
            @click="onClickTab(items.name)"
          >
            <svg-icon :iconClass="items.icon" />
            <span class="title">{{ items.name }}</span>
            <!-- 弹窗部分-批量修改 -->
            <div
              class="amend-pup-wrap"
              v-if="isShowAmendPup == true && items.name == '批量修改'"
              @click.stop=""
            >
              <div class="head">
                <div class="lf">批量修改字段</div>
                <div class="rt" @click.stop="closeAmendPup">X</div>
              </div>
              <div class="body">
                <el-select v-model="field" placeholder="选择列" size="mini">
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-input
                  size="mini"
                  placeholder="输入规则"
                  v-model="inputValue"
                ></el-input>
              </div>
              <div class="foot">
                <button @click.stop="closeAmendPup">取消</button>
                <button @click.stop="amend">修改</button>
              </div>
            </div>
          </div>
        </div>
        <div class="content" :class="{ 'content-active': slide }">
          <!-- 右侧内容 -->
          <result-list
            :type="type"
            :types="types"
            :list="findResultData"
            ref="resultListTable"
            v-if="isRefresh"
          ></result-list>
        </div>
      </div>
      <div class="slide" :class="{ 'slide-active': slide }">
        <div class="slide-top">
          <span href="javascript:;" @click="onClickSlideLeft">
            <svg-icon iconClass="menu" />
          </span>
          <span class="slide-top-title">发现方式分类</span>
        </div>
        <el-menu
          :default-active="menuIndex"
          @open="onOpenMenu"
          @close="onCloseMenu"
        >
          <el-submenu
            v-for="(items, index) in menus"
            :key="index"
            :index="`${index}`"
          >
            <template slot="title">
              <img
                class="icon"
                src="@/assets/images/home.png"
                alt=""
                srcset=""
              />
              <div class="title">{{ items.className }}</div>
            </template>
            <el-menu-item
              v-for="(value, i) in items.subclass"
              :key="i"
              :index="`${index}${i}`"
            >
              <img
                class="icon"
                src="@/assets/images/right.png"
                alt=""
                srcset=""
              />
              <div class="sub-title">
                {{ value.className }}
              </div>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!-- 弹窗部分-添加设备 -->
    <div class="add-pup-wrap" v-if="isShowAddPup">
      <div class="modal-content">
        <div class="close">
          <span @click="closeAddPup">
            <svg-icon iconClass="close" />
          </span>
        </div>
        <div class="content">
          <div class="head">成功添加{{ nums }}个设备！</div>
          <div class="body">
            <button @click="closeAddPup">继续添加设备</button>
            <button @click="viewManage">查看设备列表</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import resultList from "@/components/resultList.vue";
import {
  putNodeInsert,
  putInsertSnmp,
  getClassThree,
  getClassLeaf,
} from "@/api/find";

@Component({
  components: {
    resultList,
  },
})
export default class result extends Vue {
  [x: string]: any;
  // 传给子组件的参数
  public type: string = "全部分类";
  public types: Array<any> = [];
  public findResultData: Array<any> = [];

  public tabIndex: number = 0;
  public slide: boolean = false;

  public menuIndex: string = null;
  public isShowTip: boolean = false;
  public isShowAddPup: boolean = false;
  public isShowAmendPup: boolean = false;

  public isRefresh: boolean = true;

  public options: Array<object> = [
    {
      label: "主机名",
      value: "hostName",
    },
    {
      label: "全部分类",
      value: "hostType",
    },
    {
      label: "描述",
      value: "hostDesc",
    },
  ];
  public field: string = "";
  public inputValue: string = "";
  public selectedData: Array<object> = [];
  public nums: number = 0; //成功添加设备数量
  public deviceNums: number = 0; //搜索总设备数

  public tabs: Array<object> = [
    {
      name: "添加所有设备",
      value: 0,
      icon: "add1",
    },
    {
      name: "仅添加所选设备",
      value: 1,
      icon: "add2",
    },
    {
      name: "批量修改",
      value: 2,
      icon: "amend",
    },
    {
      name: "克隆",
      value: 3,
      icon: "clone",
    },
    {
      name: "删除",
      value: 4,
      icon: "del2",
    },
    {
      name: "取消",
      value: 5,
      icon: "cancel",
    },
  ];

  public menus: object = [];
  $router: any;

  public created() {
    this.findResultData =
      JSON.parse(sessionStorage.getItem("findResultData")) == null
        ? []
        : JSON.parse(sessionStorage.getItem("findResultData"));
    this.deviceNums = this.findResultData.length;
    // 获取左侧树形分类列表
    getClassThree({}).then((res) => {
      // console.log(res.data);
      this.menus = res.data;
    });
    // 获取分类列表
    getClassLeaf({}).then((res) => {
      // console.log(res.data);
      this.types = res.data;
    });
  }
  // 顶部消息
  public tipToggle() {
    this.isShowTip = !this.isShowTip;
  }

  public onClickTab(e: any) {
    this.selectedData = this.$refs.resultListTable.selectedData;
    console.log("选中", this.selectedData);

    switch (e) {
      case "添加所有设备":
        console.log("添加所有设备", this.findResultData);

        let _nodeList = [];
        this.findResultData.map((item) => {
          let obj = {
            ip: item.ip,
            name: " ",
            userDefinedPropertyList: [
              {
                nodeIp: item.ip,
                nodeName: " ",
                propertyName: "默认值",
                propertyValue: "default",
              },
            ],
          };
          _nodeList.push(obj);
        });
        for (let i = 0; i < this.findResultData.length; i++) {
          console.log(this.findResultData[i]);
          let obj = { ip: this.findResultData[i].ip, name: " " };
          _nodeList.push(obj);
        }
        //ip去重
        let res = new Map();
        let nodeList = _nodeList.filter(
          (_nodeList) => !res.has(_nodeList.ip) && res.set(_nodeList.ip, 1)
        );
        console.log("nodeList", nodeList, this.findResultData);

        putNodeInsert(nodeList).then((res: any) => {
          console.log(res.data);
          if (res.data.result == "success") {
            this.findResultData.map((item) => {
              if (item.hostDesc.length <= 0) {
                item.hostDesc = " ";
              }
              if (item.hostName.length <= 0) {
                item.hostName = " ";
              }
              if (item.hostType.length <= 0) {
                item.hostType = " ";
              }
              if (item.readCommunity.length <= 0) {
                item.readCommunity = " ";
              }
              if (item.writeCommunity.length <= 0) {
                item.writeCommunity = " ";
              }
            });
            putInsertSnmp(this.findResultData).then((res: { data: any }) => {
              console.log("添加所有设备***", res.data);
              if (res.data.result == "success") {
                this.$message({
                  showClose: true,
                  message: "设备添加成功！",
                  type: "success",
                });
                this.nums = this.findResultData.length;
                this.isShowAddPup = true;
              } else {
                this.$message({
                  showClose: true,
                  message: "设备添加失败！",
                  type: "error",
                });
              }
            });
          } else {
            this.$message({
              showClose: true,
              message: "设备添加失败！",
              type: "error",
            });
          }
        });
        break;
      case "仅添加所选设备":
        console.log("仅添加所选设备");

        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少选择一项！",
            type: "error",
          });
        } else {
          let _nodeList = [];
          this.selectedData.map((item) => {
            let obj = {
              ip: item.ip,
              name: " ",
              userDefinedPropertyList: [
                {
                  nodeIp: item.ip,
                  nodeName: " ",
                  propertyName: "默认值",
                  propertyValue: "default",
                },
              ],
            };
            _nodeList.push(obj);
          });
          let res = new Map();
          let nodeList = _nodeList.filter(
            (_nodeList) => !res.has(_nodeList.ip) && res.set(_nodeList.ip, 1)
          );
          console.log("nodeList", nodeList);

          putNodeInsert(nodeList).then((res: any) => {
            console.log(res.data);
            if (res.data.result == "success") {
              console.log("this.selectedData", this.selectedData);
              this.selectedData.map((item) => {
                if (item.hostDesc.length <= 0) {
                  item.hostDesc = " ";
                }
                if (item.hostName.length <= 0) {
                  item.hostName = " ";
                }
                if (item.hostType.length <= 0) {
                  item.hostType = " ";
                }
                if (item.readCommunity.length <= 0) {
                  item.readCommunity = " ";
                }
                if (item.writeCommunity.length <= 0) {
                  item.writeCommunity = " ";
                }
              });
              putInsertSnmp(this.selectedData).then((res: { data: any }) => {
                console.log("仅添加所选设备***", res.data);
                if (res.data.result == "success") {
                  this.$message({
                    showClose: true,
                    message: "设备添加成功！",
                    type: "success",
                  });
                  this.nums = this.selectedData.length;
                  this.isShowAddPup = true;
                } else {
                  this.$message({
                    showClose: true,
                    message: "设备添加失败！",
                    type: "error",
                  });
                }
              });
            } else {
              this.$message({
                showClose: true,
                message: "设备添加失败！",
                type: "error",
              });
            }
          });
        }
        break;
      case "批量修改":
        console.log("批量修改");
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少选择一项！",
            type: "error",
          });
        } else {
          this.isShowAmendPup = true;
        }
        break;
      case "克隆":
        console.log("克隆");
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少克隆一项！",
            type: "error",
          });
        } else {
          JSON.parse(JSON.stringify(this.selectedData)).map((item: any) => {
            this.findResultData.unshift(item);
          });
          this.indeterminate = false;
          this.deviceNums = this.findResultData.length;
          sessionStorage.setItem(
            "findResultData",
            JSON.stringify(this.findResultData)
          );
          this.isRefresh = false;
          this.$nextTick(() => {
            this.isRefresh = true;
          });
        }
        break;
      case "删除":
        console.log("删除");
        if (this.selectedData.length <= 0) {
          this.$message({
            showClose: true,
            message: "至少删除一项！",
            type: "error",
          });
        } else {
          this.$confirm("此操作将删除所选设备, 是否继续?", "提示", {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              //删除操作
              this.findResultData = this.findResultData.filter(
                (items: { checked: any }) => items.checked === false
              );
              this.findResultData.map((item: any) => {
                item.checked = false;
              });
              this.indeterminate = false;
              this.deviceNums = this.findResultData.length;
              sessionStorage.setItem(
                "findResultData",
                JSON.stringify(this.findResultData)
              );
              this.isRefresh = false;
              this.$nextTick(() => {
                this.isRefresh = true;
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            });
        }
        break;
      case "取消":
        console.log("取消");
        this.findResultData = [];
        sessionStorage.setItem("findResultData", JSON.stringify([]));
        this.$router.push("/find/protocol");
        break;
    }
  }

  // 关闭添加设备弹窗
  public closeAddPup() {
    this.isShowAddPup = false;
  }
  // 关闭修改弹窗
  public closeAmendPup() {
    this.isShowAmendPup = false;
  }

  public viewManage() {
    this.$router.push("/manage/device");
  }
  //ip地址判断
  public isValidIP(ip: any) {
    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    return reg.test(ip);
  }
  public amend() {
    console.log("修改", this.field + "-" + this.inputValue);
    if (this.field.trim().length <= 0) {
      this.$message({
        showClose: true,
        message: "请选择列！",
        type: "error",
      });
    } else if (this.inputValue.trim().length <= 0) {
      this.$message({
        showClose: true,
        message: "规则不能为空！",
        type: "error",
      });
    } else {
      let key = this.field;
      this.findResultData
        .filter((items: { checked: any }) => items.checked === true)
        .map((item) => {
          item[key] = this.inputValue;
        });
      console.log("*", this.findResultData);
      sessionStorage.setItem(
        "findResultData",
        JSON.stringify(this.findResultData)
      );
      this.$message({
        showClose: true,
        message: "批量修改成功！",
        type: "success",
      });
      this.isShowAmendPup = false;
    }
  }

  public onClickSlideLeft() {
    this.slide = !this.slide;
  }

  public onOpenMenu(index: string) {
    this.menuIndex = index;
  }

  public onCloseMenu() {
    this.menuIndex = null;
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
// 侧边导航样式重置
/deep/.el-icon-arrow-down:before
  content '\e790'
/deep/.el-submenu__icon-arrow
  font-size 16px
  right auto
  left 7px
// 重置表格组件样式
.vxe-table--render-default .vxe-header--column
  line-height 34px
/deep/.el-input__inner
  color #000
  font-weight 700
/deep/.el-submenu .el-submenu__title:hover
  background-color transparent
/deep/.el-submenu .el-menu-item:hover
  background-color transparent
/deep/.el-submenu .el-menu-item.is-active
  background-color transparent
/deep/.el-menu-item, /deep/.el-submenu__title
  line-height 30px
  height 30px
/deep/.el-submenu .el-menu-item
  line-height 20px
  height 20px
.tip-active
  transform translateY(-30px)
  transition all 0.5s ease-out
.mange-device
  width 100%
  height 100vh
  position fixed
  left 0
  top 36px
  background #fff
  .tip
    background-color $auxiliaer-color-5
    -webkit-animation all 2s infinite
    -moz-animation all 2s infinite
    animation all 2s infinite
    height 30px
    display flex
    justify-content space-between
    align-items center
    padding-left 27px
    padding-right 20px
    color #00B597
    font-size 12px
    span
      color #FF6512
    .rt
      cursor pointer
  .tabs-slide
    position relative
    height 100%
    .tabs
      background-color $auxiliaer-color-6
      width 100%
      text-align left
      height 40px
      display flex
      align-items center
      .menus
        display inline-block
        width 10%
        transition all 0.5s ease-in
        margin-right 10px
      .tab-tab-warp
        display flex
        .svg-icon
          width 12px
          height 9px
          // position relative
          // left 9px
          // top -4px
      .menus-active
        width 6%
        transition all 0.5s ease-out
      .tab-tab:hover
        border-color #5D5D5D
        background #191919
      .tab-tab
        position relative
        // padding 4px 14px
        width 77px
        height 27px
        display flex
        justify-content center
        align-items center
        cursor pointer
        text-align center
        margin-left 6px
        border solid 1px $auxiliaer-color-7
        background $auxiliaer-color-7
        -moz-box-shadow 1px 0px 2px rgba(0, 0, 0, 0.8)
        -webkit-box-shadow 1px 0px 2px rgb(0 0 0 / 80%)
        box-shadow 1px 0px 2px rgb(0 0 0 / 80%)
        .svg-icon
          width 11px
          height 11px
          vertical-align middle
        .title
          font-size 12px
          color #fff
          margin-left 8px
      .tab-tab:nth-child(1)
        width 108px
      .tab-tab:nth-child(2)
        width 128px
      .tab-tab:nth-child(3)
        width 97px
      .tab-tab-active
        background #d27c28
      .content
        overflow-y auto
        width 90%
        position absolute
        left 10%
        transition all 0.5s ease-in
        top 40px
        background #fff
      .content-active
        width 86%
        left 6.8%
        transition all 0.5s ease-out
    .slide
      position absolute
      top 0
      width 10%
      height 100%
      background #fff
      box-shadow 1px 0px 3px 0px rgba(0, 0, 0, 0.16)
      transition all 0.5s ease-in
      background $auxiliaer-color-5
      .slide-top
        width 100%
        height 40px
        line-height 38px
        text-align left
        clear both
        box-sizing border-box
        border-bottom 1px solid #484848
        display flex
        align-items center
        span:first-child
          cursor pointer
        .slide-top-title
          font-size 12px
          color #fff
          margin-left 20px
        .menu
          display flex
        .svg-icon:first-child
          width 12px
          height 9px
          position relative
          left 9px
          top -4px
      /deep/.el-menu
        background none
        border-right none
        /deep/.el-submenu__title
          text-align left
        .svg-icon
          width 12px
          height 12px
          margin-right 10px
        .title
          font-size 12px
          color #fff
          font-weight 500
          width 50px
          text-align left
          display inline-block
        .down
          width 9px
          height 9px
          vertical-align middle
          transition all 0.5s
        .down-active
          transform rotate(180deg)
          transition all 0.5s
        .icon
          width 16px
          height 16px
          margin 0 6px
        .el-menu-item
          font-size 12px
          color #366cca
          font-weight 500
          min-width auto
          // padding-left: 100px !important;
          .sub-title
            width 50px
            display inline-block
            text-align left
            color #fff
        .el-menu-item:nth-child(2n+1)
          background $auxiliaer-color-8
  .slide-active
    transform translateX(-100%)
    transition all 0.5s ease-out
// 弹窗-添加设备
.add-pup-wrap
  position fixed
  left 0
  right 0
  margin 0 auto
  top 330px
  z-index 100
  background #fff
  padding 50px 33px
  border solid 8px rgba(170, 170, 170, 0.1)
  border-radius 10px
  width 443px
  .modal-content
    position relative
    .close
      position absolute
      top -45px
      right -20px
      cursor pointer
      .svg-icon
        font-size 11px
    .content
      width 100%
      .head
        font-weight 700
        font-size 15px
        text-align center
        color #333
      .body
        display flex
        justify-content center
        button
          width 117px
          height 30px
          font-size 13px
          cursor pointer
          border-radius 5px
          color #fff
          border none
          margin-top 44px
        button:first-child
          background #c3c3c3
          margin-right 55px
        button:last-child
          background #1269ff
// 批量修改
.amend-pup-wrap
  position absolute
  top 33px
  left 0
  width 480px
  background $auxiliaer-color-9
  z-index 60
  color #fff
  .head
    display flex
    justify-content space-between
    align-items center
    padding-left 18px
    padding-right 2px
    height 28px
    border-bottom solid 1px #797979
    .lf
      font-size 12px
    .rt
      width 23px
      height 23px
      text-align center
      line-height 23px
      font-size 13px
    .rt:hover
      background #c80505
  .body
    display flex
    justify-content space-around
    margin-top 15px
    /deep/.el-input .el-input__inner
      background $auxiliaer-color-8
      border-radius 0
      border none
      height 25px
      color #A2A2A2
    /deep/.el-select .el-input .el-input__inner
      width 150px
    /deep/.el-input .el-input__inner
      width 265px
    /deep/.el-input
      width auto
  .foot
    padding 23px 0
    button
      width 95px
      height 25px
      font-size 12px
      cursor pointer
      color #fff
    button:first-child
      margin-right 44px
      border solid 1px $auxiliaer-color-10
      background $auxiliaer-color-10
    button:last-child
      border solid 1px $auxiliaer-color-11
      background $auxiliaer-color-4
</style>
